<template>
  <div>
    <div v-for="item in radios" @click="toRadioPage(item.id)" :key="item.id">
      <div>
        <img v-lazy="item.dj && item.dj.avatarUrl" alt="" />
      </div>
      <div>{{ item.name }} - {{ item.dj.nickname }}</div>
      <div>
        {{ item.desc || "" }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import Router, { Route } from "vue-router";
import { APIType } from "@/api";
import { SearchType } from "@/model/search-response.model";
import { CommonIdType } from "@/model/id-or-enum.model";
import { DJRadioInfo } from "@/model/other.model";
@Component({})
export default class SearchResultRadio extends Vue {
  radios: DJRadioInfo[] = [];
  loading = false;
  loadingText = "努力加载中...";

  $route: Route;
  $router: Router;
  $api: APIType;

  mounted() {
    // console.log(this.$route.query.val)
    this.fetchData();
  }
  // 计算当前搜索的值
  get query() {
    return this.$route.query.val;
  }
  // query变化重新搜索
  @Watch("query")
  private onQueryChange() {
    this.radios = [];
    this.fetchData();
  }
  fetchData() {
    const offset = this.radios.length;
    this.loading = true;
    this.$api
      .searchByType<"Radio">(this.$route.query.val, SearchType.Radio, offset)
      .then((res) => {
        if (res?.result?.djRadios?.length) {
          this.radios = [...this.radios, ...res.result.djRadios];
        }
      })
      .finally(() => (this.loading = true));
  }
  toRadioPage(id: CommonIdType) {
    // this.$router.push({path: `/artist/${id}`})
  }
}
</script>

<style scoped></style>
